<template>
	<view>
		<view class="tip">会员可购买，只需支付邮费</view>
		<view class="hot-goods u-m-b-10 u-p-x-16">
			<view class="u-waterfall">
				<view id="u-left-column" class="u-column">
					<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList"
						:key="leftGoods.id">
						<view style="text-align: center;" @tap="jump('/pages/goods/detail', { id: leftGoods.id })">
							<image style="width: 326rpx;height: 326rpx" :src="leftGoods.image"></image>
							<view class="title u-ellipsis-2 u-m-b-10">{{leftGoods.title}}</view>
							<view class="send">{{leftGoods.price}}<text style="margin-left: 5rpx;">邮费</text></view>
							<view class="money">{{leftGoods.original_price}}</view>
						</view>
					</view>
				</view>
				<view id="u-right-column" class="u-column">
					<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList"
						:key="rightGoods.id">
						<view style="text-align: center;" @tap="jump('/pages/goods/detail', { id: rightGoods.id })">
							<image style="width: 326rpx;height: 326rpx" :src="rightGoods.image"></image>
							<view class="title u-ellipsis-2 u-m-b-10">{{rightGoods.title}}</view>
							<view class="send">{{rightGoods.price}}<text style="margin-left: 5rpx;">邮费</text></view>
							<view class="money">{{rightGoods.original_price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 缺省页 -->
		<shopro-empty v-if="isEmpty" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>
		<!-- 加载更多 -->
		<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEmpty: false,
				goodsList: [],
				searchVal: '',
				listParams: {
					page: 1,
					postage:1
				},
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 1,
				
				// 瀑布流 350-330
				addTime: 100, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: []
				
			}

		},
		// 触底加载更多
		onReachBottom() {
			if (this.listParams.page < this.lastPage) {
				this.listParams.page += 1;
				this.getGoodsList();
			}
		},
		onLoad() {
		
				this.getGoodsList();
		},
		methods: {
			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},
	// 瀑布流相关
		async splitData() {
			if (!this.tempList.length) return;
			let item = this.tempList[0];
			if (!item) return;

			// 分左右
			if (this.leftHeight < this.rightHeight) {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			} else if (this.leftHeight > this.rightHeight) {
				this.rightHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.rightList.push(item);
			} else {
				this.leftHeight += item.activity_discounts_tags.length ? 350 : 330;
				this.leftList.push(item);
			}

			// 移除临时列表的第一项，如果临时数组还有数据，继续循环
			this.tempList.splice(0, 1);
			if (this.tempList.length) {
				setTimeout(() => {
					this.splitData();
				}, this.addTime);
			}
		},
		// 商品列表
		getGoodsList() {
			let that = this;
			that.loadStatus = 'loading';
			that.$https('goods.listsNew', that.listParams, '加载中...').then(res => {
				if (res.code === 1) {
					that.goodsList = [...that.goodsList, ...res.data.data];
					that.isEmpty = !that.goodsList.length;
					that.lastPage = res.data.last_page;
					that.loadStatus = that.listParams.page < res.data.last_page ? 'loadmore' : 'nomore';
					that.tempList = res.data.data;
					that.splitData();
				}
			});
			
		},
		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		}
	}
</script>
<style>
	page {
		background: #ffffff !important;
	}
</style>
<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.tip {
		height: 60rpx;
		background: #010101;
		font-size: 24rpx;
		color: #FFFFFF;
		font-weight: 500;
		text-align: center;
		line-height: 60rpx;
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.hot-goods {
		background: none;
		margin-top: 32rpx;

		.refresh-btn {
			margin-left: 50%;
			transform: translateX(-50%);
			width: 156rpx;
			line-height: 50rpx;
			background: #ffffff;
			border-radius: 25rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			white-space: nowrap;
		}

		.refresh-active {
			transform: rotate(360deg);
			transition: all linear 0.5s;
		}
	}
	.title{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #001226;
		margin-top: 8rpx;
	}

	.send{
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FC5619;
		margin-top: 8rpx;
	}
	.money{
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #B5B5B5;
		text-decoration: line-through;
		margin-top: 8rpx;
	}
</style>
